<template>
    <div>
        <el-breadcrumb
            separator-class="el-icon-arrow-right"
            class="breadcrumb-base"
            style="line-height: 30px;"
        >
            <el-breadcrumb-item>
                <!--:to="{ path: '/application' }"-->
                <i class="el-icon-data-analysis"></i>
                <span>结果统计</span>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <div class="main-container">
            <el-tabs
                v-model="activeName"
                type="card"
                @tab-click="handleClick"
            >
                <el-tab-pane
                    label="结果统计"
                    name="first"
                >
                    <div style="width:80%;margin:0 auto;">
                        <DiagnosisResultStatisticsComp></DiagnosisResultStatisticsComp>
                    </div>
                </el-tab-pane>
                <el-tab-pane
                    label="各院统计"
                    name="second"
                >
                    <div style="width:80%;margin:0 auto;">
                        <el-row>
                            <el-button
                                style="float: right;"
                                type="primary"
                                size="mini"
                                @click="refresh"
                            >刷新</el-button>
                        </el-row>
                        <el-row class="header-txt">分医院性能指标统计</el-row>
                        <el-table
                            :data="tableData"
                            border
                            bordercolor="#70ad47"
                            :header-cell-style="{
                                'background-color': '#E6E9EF',
                                'color': '#777C7C',
                                'font-weight': '400',
                                'font-size': '15px',
                                'border-right': '1px solid #70ad47',
                            }"
                            :row-class-name="tableRowClassName"
                        >
                            <el-table-column
                                prop="hospitalName"
                                label="医院名称"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="realPositiveCount"
                                label="真阳性数"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="fakePositiveCount"
                                label="假阳性数"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="realNegativeCount"
                                label="真阴性数"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="fakeNegativeCount"
                                label="假阴性数"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="total"
                                label="总切片数"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="sensitivityStr"
                                label="敏感度"
                                align="center"
                            >
                            </el-table-column>
                            <el-table-column
                                prop="specificityStr"
                                label="特异度"
                                align="center"
                            >
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>

            </el-tabs>

        </div>
    </div>
</template>

<script>
import DiagnosisResultStatisticsComp from '../components/DiagnosisResultStatisticsComp';
export default {
    name: 'diagnosisResultStatistics',
    components: {
        DiagnosisResultStatisticsComp,
    },
    data() {
        return {
            activeName: 'first',
            tableData: [],
        };
    },
    mounted() {
        this.getAllHospitalAiData();
    },
    methods: {
        refresh() {
            this.getAllHospitalAiData();
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex % 2 === 1) {
                return 'bgcolor1';
            } else {
                return 'bgcolor2';
            }
        },
        handleClick(tab, event) {},
        getAllHospitalAiData() {
            this.$axios({
                method: 'GET',
                url: '/PROXY-Remote/biopsy/classification/ai/statistic',
            }).then((res) => {
                if (res.data.code === 200) {
                    let result = res.data.data;
                    result.forEach((item) => {
                        item.sensitivityStr = item.sensitivityStr + '%';
                        item.specificityStr = item.specificityStr + '%';
                    });
                    this.tableData = result;
                }
            });
        },
    },
};
</script>

<style scoped>
.el-table--border,
.el-table--group {
    border: 2px solid #70ad47;
}
/deep/ .el-table td,
.el-table th.is-leaf {
    border-top: 1px solid #70ad47;
}
/deep/ .el-table--border td,
.el-table--border th,
.el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
    border-right: 1px solid #70ad47;
}
/deep/ .bgcolor1 {
    background: #d5e3cf;
}
/deep/ .bgcolor2 {
    background: #ebf1e9;
}
.header-txt {
    text-align: center;
    line-height: 40px;
}
</style>